<template>
    <div class="loginStyle">
        <el-tabs type="border-card" class="loginContainer">
            <el-tab-pane label="登录">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <h3 class="loginTitle">系统登录</h3>
                    <el-form-item prop="user">
                        <el-input v-model.number="form.user" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input type="password" v-model="form.pass" @keyup.enter.native="onSubmit" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册">
                <el-form ref="register" :model="register" label-width="80px" :rules="rules1">
                    <h3 class="loginTitle">用户注册</h3>
                    <el-form-item prop="userRealname">
                        <el-input v-model="register.userRealname" placeholder="真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item prop="userName">
                        <el-input v-model="register.userName" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="userPwd">
                        <el-input type="password" v-model="register.userPwd" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass1">
                        <el-input type="password" v-model="register.pass1" placeholder="确认密码" @blur="blur"></el-input>
                    </el-form-item>
                    <el-form-item prop="userPhone">
                        <el-input v-model="register.userPhone" placeholder="电话"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onRegister()">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import LoginService from "../model/LoginService";
    const loginService=LoginService.getInstance();
    export default {
        name: "Login",
        data(){
            return{
                form:{
                    user:'',
                    pass:''
                },
                register:{
                    userRealname:"",
                    userName:'',
                    userPwd:'',
                    pass1:'',
                    userPhone:''
                },
                rules:{
                    user:[
                        {required:true,message:"请输入用户名！"}
                    ],
                    pass:[
                        {required:true,message:"请输入密码！"}
                    ]
                },
                rules1:{
                    userRealname:[
                        {pattern:"^[\u4e00-\u9fa5]{2,4}$",required:true,message:"姓名为2-4字！",trigger:"blur"}
                    ],
                    userName:[
                        {pattern:"^[a-zA-Z0-9_]{2,10}$",required:true,message:"用户名为2-10位(数字、字母、下划线)！",trigger:"blur"}
                    ],
                    userPwd:[
                        {pattern:"^[a-zA-Z0-9_]{3,10}$",required:true,message:"密码为3-10位(数字、字母、下划线)！",trigger:"blur"}
                    ],
                    pass1:[
                        {required:true,message:"请确认密码！"}
                    ],
                    userPhone:[
                        {pattern:"^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$",required:true,message:"请输入有效电话！"}
                    ]
                }
            }
        },

        created() {
            localStorage.setItem("token","");
            this.$loading().close();
            loginService.deAuthority(this.$http);
        },

        methods:{
            onSubmit(){
                // eslint-disable-next-line no-unused-vars
                this.$refs.form.validate().then(msg=> {  //开启校验
                        this.$loading({//懒加载
                            lock: true,
                            text: '正在登录...',
                            spinner: 'fa fa-hourglass fa-spin fa-3x',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                    //登录参数
                    const param1 = new URLSearchParams();
                    param1.append('user', this.form.user);
                    param1.append('pass', this.form.pass);
                    //修改登录次数参数
                    const param = new URLSearchParams();
                    param.append('userName', this.form.user);
                    const params = {
                        param1: param1,
                        param: param,
                        user: this.form.user
                    };
                    loginService.login(params,this.$router,this.$alert,this.$http,this.$loading);
                    // eslint-disable-next-line no-unused-vars
                }).catch(msg=>{
                    this.$message({
                        type:"warning",
                        message:`请正确输入信息！`
                    })
                });
            },
            onRegister: function () {
                // eslint-disable-next-line no-unused-vars
                this.$refs.register.validate().then(msg => {
                    let formData = new FormData();
                    for(const key in this.register){
                        if(Object.prototype.hasOwnProperty.call(this.register, key)){
                            if(this.register[key]!=null){
                                formData.append(key,this.register[key]);
                            }
                        }
                    }
                    const date = this.$date.formatDate(new Date(), "yyyy-MM-DD hh:mm:ss");//yyyy-MM-DD hh:mm:ss
                    formData.append("userCreatedate",date);
                    loginService.onRegister(formData,this.$http,this.$message);
                    // eslint-disable-next-line no-unused-vars
                }).catch(msg => {
                    this.$message({
                        type: "warning",
                        message: "请正确输入信息！"
                    })
                })
            },
            blur(){
                if(this.register.userPwd!==this.register.pass1){
                    this.$message({
                        type:"warning",
                        message:`两次密码不一致！`
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .loginStyle {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../../src/assets/img/214026-15277740268707.jpg');
        height: 100%;
        background-size: cover;
    }
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        opacity: 0.9;
        text-align: center;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }
    .el-form-item{
        margin-left: -60px;
    }
</style>